// get plus and minus buttons
const plus = document.querySelectorAll('.plus')
const minus = document.querySelectorAll('.minus')

// get timeArea div
const timeArea = document.getElementsByClassName('timeArea')[0]
const title = document.querySelector('.timeArea>h1')

// get btnArea div
const btnArea = document.getElementsByClassName('btnArea')[0]

const intText = document.getElementById('intText')

// get set time button
const set = document.getElementById('set')
const word = document.getElementById('word')

// get controls div
const controls = document.getElementById('controls')

// get button controls
const play = document.getElementById('play')
const pause = document.getElementById('pause')
const rewriting = document.getElementById('rewriting')
const reply = document.getElementById('reply')

// get time paragraph
const hoursDiv = document.getElementById('hours').children[1]
const minutesDiv = document.getElementById('minutes').children[1]
const secondsDiv = document.getElementById('seconds').children[1]

btnArea.style.top = timeArea.offsetTop + timeArea.offsetHeight / 2 + 'px'

window.onresize = function () {
  btnArea.style.top = timeArea.offsetTop + timeArea.offsetHeight / 2 + 'px'
  controls.style.top = timeArea.offsetTop + timeArea.offsetHeight / 2 + 'px'
}

// plus the time
plus.forEach(elem => {
  elem.onclick = () => {
    let value = elem.parentElement.children[1]
    console.log(elem.parentElement.children[1])

    if (elem.parentElement.className === 'hours') {
      if (value.textContent == 24) {
        value.textContent = window.parseInt(value.textContent)
      } else {
        value.textContent = window.parseInt(value.textContent) + 1
      }

      if (value.textContent <= 9) {
        value.textContent = '0' + window.parseInt(value.textContent)
      }
    }

    if (elem.parentElement.className === 'minutes' || elem.parentElement.className === 'seconds') {
      if (value.textContent == 59) {
        value.textContent = window.parseInt(value.textContent)
      } else {
        value.textContent = window.parseInt(value.textContent) + 1
      }

      if (value.textContent <= 9) {
        value.textContent = '0' + window.parseInt(value.textContent)
      }
    }
  }
})

// minus the time
minus.forEach(elem => {
  elem.onclick = () => {
    let value = elem.parentElement.children[1]

    if (value.textContent == 0) {
      value.textContent = window.parseInt(value.textContent)
    } else {
      value.textContent = window.parseInt(value.textContent) - 1
    }

    if (value.textContent <= 9) {
      value.textContent = '0' + window.parseInt(value.textContent)
    }
  }
})
word.onclick = () => {
  let text = prompt('请输入倒计时目的')
  if (text) {
    intText.innerText = text
  }
}

// set the time
set.onclick = () => {
  title.className = 'marBom'
  const hou = window.parseInt(hoursDiv.textContent) * 60
  const min = (hou + window.parseInt(minutesDiv.textContent)) * 60
  let sec = min + window.parseInt(secondsDiv.textContent)

  let saveSec = sec

  if (sec === 0) {
    alert('请设定时间')
    return
  } else {
    document.getElementById('hours').className = 'hours tag'
    document.getElementById('minutes').className = 'hours tag'

    btnArea.style.display = 'none'
    controls.style.display = 'block'

    plus.forEach(elem => {
      elem.style.display = 'none'
    })

    minus.forEach(elem => {
      elem.style.display = 'none'
    })

    var setIn = setInterval(countdown, 1000)
    controls.style.top = timeArea.offsetTop + timeArea.offsetHeight / 2 + 'px'
  }

  // countdown function
  function countdown() {
    if (sec >= 0) {
      let minutes = Math.floor(sec / 60)
      let hours = Math.floor(minutes / 60)
      let seconds = sec % 60

      minutes %= 60

      if (hours <= 9) hours = '0' + hours
      if (minutes <= 9) minutes = '0' + minutes
      if (seconds <= 9) seconds = '0' + seconds

      hoursDiv.textContent = hours
      minutesDiv.textContent = minutes
      secondsDiv.textContent = seconds

      sec--
    } else {
      clearInterval(setIn)
    }
  }

  countdown()

  // paused the count down timer
  pause.onclick = () => {
    play.style.display = 'inline-block'
    pause.style.display = 'none'

    clearInterval(setIn)
  }

  // played the count down timer
  play.onclick = () => {
    pause.style.display = 'inline-block'
    play.style.display = 'none'

    setIn = setInterval(countdown, 1000)
  }

  // rewriting the time
  rewriting.onclick = () => {
    title.className = ''
    document.getElementById('hours').className = 'hours'
    document.getElementById('minutes').className = 'hours'
    btnArea.style.display = 'inline-block'
    controls.style.display = 'none'

    plus.forEach(elem => {
      elem.style.display = 'block'
    })

    minus.forEach(elem => {
      elem.style.display = 'block'
    })

    clearInterval(setIn)
  }

  // reply the countdown
  reply.onclick = () => {
    sec = saveSec
  }
}
